<template>
  <div
    v-show="selectData"
    ref="containerRef"
    class="fixed top-0 left-0 border bg-background rounded-xl text-foreground"
    :style="{ zIndex: CONTENT_ZINDEX.content, width: CONTAINER_WIDTH + 'px' }"
  >
    <DetailHeader
      :container-el="containerRef"
      :last-position="lastPosition"
      :selected-el="selectedEl"
      @close-window="closeWindow"
      @update-window-pos="updateWindowPosition"
    />
    <div style="max-height: calc(100vh - 200px)" class="p-4 overflow-auto">
      <KeepAlive include="detail-style,DetailStyle">
        <FloatElement
          :element="selectData"
          :triggertype="triggerTypeType"
          :presskey="pressKey"
        />
      </KeepAlive>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  onMounted,
  onUnmounted,
  ref,
  shallowRef,
  shallowReactive,
  nextTick,
  watch,
} from 'vue';
import { emitter, EmitterEvents } from '@root/src/lib/mitt';
import CSSRulesUtils, {
  ElementAppliedStyleRules,
} from '@root/src/utils/CSSRulesUtils';
import {
  BrushIcon,
  CaseSensitiveIcon,
  PencilRuler,
  Code2Icon,
} from 'lucide-vue-next';
import { CONTENT_ZINDEX, SESSION_STORAGE_KEY } from '@src/utils/constant';
import getElProperties, {
  ElementProperties,
} from '@root/src/utils/getElProperties';
import FloatElement from './detail/FloatElement.vue';
import DetailHeader from './detail/DetailHeader.vue';
import { debounce, parseJSON } from '@root/src/utils/helper';

interface WindowPosition {
  x: number;
  y: number;
}

const CONTAINER_WIDTH = 350;

let listenedWindowResize = false;
let lastPosition: WindowPosition | null = parseJSON(
  sessionStorage.getItem(SESSION_STORAGE_KEY.elPropsPosition) ?? '',
  null,
);

const cssRulesUtils = new CSSRulesUtils();

const containerRef = ref<HTMLDivElement>();

const selectedEl = ref<Element>();
const elProperties = shallowRef<ElementProperties | null>(null);

let triggerTypeType = ref('');
let pressKey = ref(0);

function closeWindow() {
  // elSelector.value = '';
  // elProperties.value = null;
  // elStyleData.value = null;
  elementVisible.value = false;
  selectData.value = '';
}
function updateWindowPosition(x: number, y: number) {
  if (!containerRef.value) return;

  lastPosition = { x, y };
  containerRef.value.style.transform = `translate(${x}px, ${y}px)`;
}
const elementVisible = shallowRef(false);
const selectData = shallowRef();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function onVisibleElement({ value, options }: any) {
  console.log(value);
  if (value) {
    pressKey.value += 1;
  }
  selectData.value = value;
  updateWindowPosition(options.mouseX, options.mouseY);
}

watch(elProperties, (value) => {
  if (value) {
    if (listenedWindowResize) return;
    listenedWindowResize = true;
  } else {
    listenedWindowResize = false;
  }
});

onMounted(() => {
  emitter.on('content:float-selected', onVisibleElement);
});
onUnmounted(() => {
  cssRulesUtils.destroy();
  emitter.off('content:float-selected', onVisibleElement);
});
</script>
